<template>
  <div>
    <base-button
      v-if="addShow"
      ref="addBtn"
      v-model="addBtn"
      :class="addBtn.class"
      :disabled="addBtnDisabled"
      @buttonCB="buttonCB"
    ></base-button>
    <base-button
      v-for="(btn, i) in buttonList"
      :key="i"
      :btn-item-config="btn"
      :class="btn.class"
      @buttonCB="buttonListMethodCB($event, i)"
    ></base-button>
  </div>
</template>

<script>
import { assignObject, isEmptyValue } from '@/utils/tools'
import BaseButton from '../BaseSingleComponent/BaseButton.vue'
export default {
  // 页面按钮操作组件
  name: 'OperateComponent',

  components: {
    BaseButton
  },

  model: {
    prop: 'addBtnDefined',
    event: 'setAddBtn'
  },

  props: {
    // 自定义操作集
    operationBtnList: { type: Array, default: () => [] },
    // pageConfig.addBtn
    addBtnDefined: { type: Object, default: () => ({}) },
    // pageConfig.addBtnDisabled
    addBtnDisabled: { type: Boolean, default: undefined },
    // pageConfig.addBtnShow
    addBtnShow: { type: Boolean, default: true },
    // pageConfig.addBtnClass
    addBtnClass: { type: String, default: null }
  },

  data() {
    return {
      // addBtn: this.addBtnDefined,
      // addBtn: {
      //   title: '新增',
      //   method: 'tableAdd',
      //   icon: 'plus',
      //   iconType: 'mdi'
      // },
      addBtn: assignObject({ title: '新增', method: 'tableAdd', icon: 'plus', iconType: 'mdi' }, this.addBtnDefined),
      buttonList: this.operationBtnList,
      // 默认样式
      class: 'ma-2',
      // 默认按钮配置
      btnDefault: {
        color: 'primary',
        outlined: false,
        show: true,
        disabled: false
        // icon: '',
        // iconType: ''
        // class: 'ma-2'
      },
      // 默认大小
      btnSize: 'small',
      // 按钮大小集
      btnSizeMap: {
        'x-small': true,
        normal: true,
        small: true,
        large: true,
        'x-large': true
      }
    }
  },

  computed: {
    addShow: {
      get() {
        return this.addBtnShow && this.addBtn.show
      },
      set(nv) {
        return nv
      }
    }
  },

  watch: {
    addBtnShow() {
      this.setDefaultConfig()
    },

    addBtnDisabled(nv) {
      this.setAddBtnDisabled(nv)
      !nv && delete this.$parent.config.addBtnDisabled
    }
  },

  created() {
    // 设置按钮默认大小，统一风格
    this.btnDefault[this.btnSize] = this.btnSizeMap[this.btnSize]
    // 合并默认属性至addBtn
    // this.addBtn = assignObject(this.addBtn, this.btnDefault)
    this.addBtn = assignObject({ ...this.btnDefault }, this.addBtn)
    // 设置默认新增按钮配置
    this.setDefaultConfig()
    // 设置自定义操作集
    !isEmptyValue(this.buttonList) && this.setBtnListOperation()
  },

  mounted() {},

  methods: {
    // 设置默认新增按钮配置
    setDefaultConfig() {
      this.setAddBtnShow(this.addBtnShow, this.addBtn)
      this.setAddBtnDisabled(this.addBtnDisabled, this.addBtn)
      this.setAddBtnClass(this.class, this.addBtnClass, this.addBtn)

      // this.addBtnDefined = assignObject(this.addBtnDefined, this.addBtn)
      this.$emit('setAddBtn', this.addBtn)
    },

    /** 如果更改 $set */
    setAddBtnShow(outShow, addBtn) {
      const inShow = addBtn.show
      addBtn.show = outShow && inShow
      // console.log(this.$parent)
      // delete this.$parent.config.addBtnShow
    },

    // 设置禁用
    setAddBtnDisabled(outDisabled) {
      if (!isEmptyValue(outDisabled)) {
        this.addBtn.disabled = outDisabled
      }
    },

    // 设置样式
    setAddBtnClass(defaultClass, outClass, addBtn) {
      // 外部定义的样式
      outClass = isEmptyValue(outClass) ? '' : outClass
      // 内部定义的样式
      const inClass = isEmptyValue(addBtn.class) ? '' : addBtn.class
      // 拼接所有样式
      addBtn.class = defaultClass + ' ' + outClass + ' ' + inClass
    },

    // 自定义按钮操作方法
    setBtnListOperation() {
      const btnList = this.buttonList
      btnList.forEach((btn, i) => {
        // btn = assignObject(btn, this.btnDefault)
        btn = assignObject({ ...this.btnDefault }, { ...btn })
        this.$set(this.buttonList, i, btn)
        'class' in btn && (btn.class = this.class + ' ' + btn.class)
      })
    },

    // 按钮方法的执行
    buttonCB(methodName, el) {
      // 新增回调
      if (methodName in this) {
        this[methodName](el)
      } else {
        // 修改了默认新增按钮 method 的自定义回调 -> 例子: form component tableSearch
        this.$emit(methodName, el)
      }
      // return
    },

    // 新增
    tableAdd(el) {
      const currentCompoent = this.$refs.addBtn
      this.$emit('tableAdd', el, currentCompoent)
    },

    // 自定义按钮操作回调
    buttonListMethodCB(methodName, i) {
      // console.log(methodName, el, i)
      this.$emit('btnListCB', methodName, i)
    }
  }
}
</script>

<style lang="scss" scoped></style>
